<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="card-title">
        <span>债权管理</span>
      </div>
      <div class="loanApprove-box">
        <!-- 日期选择器的容器 -->
        <div class="date-box">
          <span>日期选择</span>
          <el-date-picker
            style="margin-left: 20px"
            v-model="dateRange"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            @change="OnDateChange"
          >
          </el-date-picker>
          <el-button type="success" style="margin-left: 15px" @click="onSearch"
            >查询</el-button
          >
        </div>
      </div>
      <el-divider></el-divider>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        :header-cell-style="{ background: '#e1e4e5' }"
      >
        <el-table-column prop="debtNo" label="债权编号" width="150px"> </el-table-column>
        <el-table-column prop="loanNo" label="借款编号"> </el-table-column>
        <el-table-column prop="loanStartDate" label="债权转入日期">
        </el-table-column>
        <el-table-column prop="debtYearRate" label="债权年利率">
        </el-table-column>
        <el-table-column prop="debtOriginalMoney" label="债权原始金额">
        </el-table-column>
        <el-table-column prop="matchedMoney" label="债权匹配金额">
        </el-table-column>
        <el-table-column
          prop="matchedStatus"
          label="债权状态"
          :formatter="Status"
        >
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <el-button type="primary" size="mini" disabled>管理</el-button>
        </el-table-column>
      </el-table>
      <el-pagination
        class="paging"
        @current-change="onPageChange"
        background
        layout="prev, pager, next"
        :page-count="filterData.totalPages"
        :current-page="filterData.curPage"
        :page-size="filterData.perPage"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      // 日期的数据
      dateRange: "",
      // 数据的表格
      tableData: [],
      // 分页表格
      filterData: {
        // 总页数
        totalPages: 3,
        // 当前页
        curPage: 1,
        // 每页的数量
        perPage: 3,
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
  methods: {
    ...mapActions({
      mydebt: "loan/mydebt",
    }),
    // 当前页数发生变化时的回调
    onPageChange(index) {
      this.filterData.curPage = index;
      this.getmydebt();
    },
    // 当日期发生变化时
    OnDateChange(data) {
      if (data) {
        console.log("日期选择发生变化时", data);
        this.filterData.start = data[0];
        this.filterData.end = data[1];
      } else {
        this.filterData.start = "";
        this.filterData.end = "";
      }
    },
    // 获取债权列表
    getmydebt() {
      this.mydebt(this.filterData).then((res) => {
        this.tableData = res.content;
        this.filterData.totalPages = res.paginateInfo.pages;
      });
    },
    // 点击查询按钮
    onSearch() {
      this.filterData.curPage = 1;
      this.getmydebt();
    },
    // 返回的状态
    Status(row) {
    //   console.log(row);
      if (row.matchedStatus === 0) {
        return "未匹配";
      } else if (row.matchedStatus === 1) {
        return "部分匹配";
      } else if (row.matchedStatus == 2) {
        return "完全匹配";
      }
    },
  },
  created() {
    this.getmydebt();
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  .box-card {
    .paging {
      margin-top: 5px;
    }
  }
}
</style>